import React, { Component } from 'react';
import {connect} from 'react-redux'
import {DetailWrapper} from './style'
import {actionCreators} from './store'
import { withRouter } from 'react-router-dom';

class Detail extends Component {
   
    render() {
        console.log(this.props)
        return (
            <DetailWrapper>
                 <div className="title">{this.props.title}</div>
                 <div className="content"  dangerouslySetInnerHTML={{__html: this.props.content}} ></div>
            </DetailWrapper>
        );
    }

    componentDidMount(){
        this.props.changeDetail(this.props.match.params.id)
    }
}

const mapState = (state)=>({
    title:state.getIn(['detail','title']),
    content:state.getIn(['detail','content'])
})

const mapDispatch = (dispatch)=>{
    return {
        changeDetail(id){
            dispatch(actionCreators.getDetailData(id))
        }
    }
}

export default connect(mapState,mapDispatch)(withRouter(Detail));